<!--  -->
<template>
	<div id="treebox"  :style="{overflow: 'auto', 'min-width': '200px', 'margin-right': '5px', 'padding-right': '5px',height:`${height}px`}">
		<el-tree ref="treeDom" class="filter-tree" :data="ModelNodes" :props="defaultprop" :default-expand-all="true" node-key="uuid" visible="visible" :expand-on-click-node="true" :highlight-current="true" :current-node-key="currentNodeKey" @node-click="handleNodeClick">
			<template slot="append" #default="{ node, data }">
				<span class="custom-tree-node">
					<span>{{ node.label }}</span>
					<span class="iconDom">
						<span @click.stop="amplify(node, data)">
							<el-icon><Aim /></el-icon>
						</span>
						<span style="margin-left: 8px" @click.stop="showOrhide(node,!node.disabled)">
							<el-icon v-show="!node.disabled"><View /></el-icon>
              <el-icon v-show="node.disabled"><Hide /></el-icon>
						</span>
						<!--<el-icon><Hide /></el-icon> 隐藏的图片 "-->
					</span>
				</span>
			</template>
		</el-tree>
	</div>
</template>

<script setup>
import { reactive, toRefs, ref, inject, onMounted, onBeforeUnmount, defineExpose,watch,watchEffect } from 'vue'
const props = defineProps({
  height: {
    type: Number,
    default: 452
  }
})
const treeDom = ref(null)

const ModelNodes = inject('ModelNodes')
const appForm = inject('appForm')
// watchEffect(() => {
//   // force update the component
//   treedata.value = [...ModelNodes.value]
//   console.log('更新了', ModelNodes.value);
// });
//ansys的时候，显示name
watch(appForm,(newForm,oldForm)=>{
	if(appForm.simulator==3){
		defaultprop.value.label = 'name'
	}else{
		defaultprop.value.label = 'alias'
	}
	
})
const onTreeFitClick = inject('onTreeFitClick')
const onTreeDisplayMeshesClick = inject('onTreeDisplayMeshesClick')

const defaultprop = ref({
	children: 'children',
  label: appForm.simulator == 3 ? 'name' : 'alias',
  disabled: 'visible'
})

// 默认选择的节点
const currentNodeKey = inject('currentNodeKey')


// 将镜头指向对应的模型
const amplify = (node) => {
	if (node.data) {
		onTreeFitClick(node)
	}
}
// 显示或隐藏模型
const showOrhide = (node,bool) => {
	if (node.data) {
    onTreeDisplayMeshesClick(node, bool)
    console.log('node',node);
  }
}

const onClickTreeMeshHL = inject('onClickTreeMeshHL')
//点击树结构，对应的mesh高亮
const handleNodeClick = (node) => {
  onClickTreeMeshHL(node.uuid)
}


// const getTreeDom = inject('getTreeDom')
onMounted(() => {
  // getTreeDom(treeDom.value)
})
defineExpose({
  treeDom
})
</script>
<style lang="scss" scoped>
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
	.iconDom {
		margin-left: 10px;
	}
	
}


</style>
